<template>
  <div>
    <h1>全局的axios使用</h1>
    <ul>
      <li v-for="item in dataList" :key="item.id">{{ item.email }}</li>
    </ul>
  </div>
</template>

<script>

export default {
  data() {
    return {
      dataList: []
    };
  },

  //在created,beforeMount,mounted都可以发起ajax请求，一般在mounted请求
  mounted() {
  
    // this.axios({
    //     url:"http://jsonplaceholder.typicode.com/comments",
    //     method:"get", //有get和post，，默认就是get
    //     params:{postId:1}
    // }).then(res=>{
    //     //请求成功了
    //     console.log("请求成功了");
    //     //成功后会有很多配置数据，但是真正的数据在data中
    //     console.log(res.data);
    //     //请求到数据，赋值，渲染到页面
    //     this.dataList = res.data
    // }).catch(err=>{
    //     //请求失败了
    //     console.log("请求失败了",err);
    // })

    //4.axios.get(url,{params:{}})
    this.axios
      .get("http://jsonplaceholder.typicode.com/comments")
      .then(res => {
        // 请求成功了;
        console.log("请求成功了");
        //成功后会有很多配置数据，但是真正的数据在data中
        console.log(res.data);
        //请求到数据，赋值，渲染到页面
        this.dataList = res.data;
      })
      .catch(err => {
        console.log("请求失败");
      });
  }
};
</script>

<style>
</style>